<template>
    <div>
        <van-row>
            <van-col span="24">
                <van-search v-model="searchKeyword" placeholder="请输入搜索关键词" />
            </van-col>
        </van-row>
        <van-row>
            <van-col span="16"><van-field label="" v-model="addkeyword" placeholder="请输入" /></van-col>
            <van-col span="8"><van-button type="primary" size="small" style="float:right;margin-top: 5px;"
                    @click="addword" native-type='button'>添加</van-button></van-col>
        </van-row>
        <van-row v-for="item in filterManagerList" :key="item.id">
            <van-col span="16"><van-field v-model="item.keyword" label="" placeholder="请输入" /></van-col>
            <van-col span="8">
                <van-button type="primary" size="small" style="float:right;margin-top: 5px;margin-left:5px;"
                    @click="editword(item.id)" native-type='button'>保存</van-button>
                <van-button type="danger" size="small" style="float:right;margin-top: 5px;" @click="delword(item.id)"
                    native-type='button'>删除</van-button></van-col>
        </van-row>
    </div>
</template>
<script>

import loginType from './loginType';
import content from '../../utils/content';

import { Toast } from 'vant'
export default {
    name: 'comKeywordEdit',
    props: {
        propName: String,
        keyId: String,
        keyName: String,
        propType: String,
        isCompare: {
            type: Boolean,
            default: true
        }
    },
    activated() {
        //this.getList();
    },
    data() {
        return {
            isActionSuccessed: false,
            addkeyword: '',
            searchKeyword: '',
            managerList: []
        }
    },
    watch: {
    },
    computed: {
        filterManagerList() {
            if (this.searchKeyword)
                return this.managerList.filter(m => m.keyword.includes(this.searchKeyword));
            else
                return this.managerList;

        }
    },
    methods: {
        refreshData() {
            this.getList();
        },
        getList() {
            var isPersionalLogin = loginType.isPrivatePersionLogin();
            var params = {
                isPersionalLogin,
                keyName: this.keyName,
                propName: this.propName
            };
            var that = this;
            this.$api.keyword.keywordList(params).then(res => {
                if (res.code === 200) {
                    if (that.isActionSuccessed) {
                        Toast('操作成功！')
                        that.isActionSuccessed = false
                    }
                    that.managerList = res.data;
                } else {
                    Toast('系统出错！')
                }
            })
        },
        addword() {
            if (!this.addkeyword) {
                Toast('请填写关键字！')
                return;
            }
            var params = {
                propType: this.propType,
                propName: this.propName,
                keyName: this.keyName,
                keyId: this.keyId,
                isPrivate: loginType.isPrivatePersionLogin(),
                keyword: content.format(this.addkeyword),
                isSelected: true,
                keywordContent: '',
                isCompare: true

            };
            var that = this;
            this.$api.keyword.keywordAdd(params).then(res => {
                if (res.code === 200 && res.data) {
                    //Toast('操作成功！')
                    that.addkeyword = '';
                    that.isActionSuccessed = true;
                    that.getList();
                } else {
                    Toast('系统出错！')
                }
            })
        },
        editword(id) {
            var that = this;
            var ary = this.managerList.filter(m => m.id == id);
            if (ary.length == 1) {
                var that = this;
                if (!ary[0].keyword) {
                    Toast('请填写关键字！')
                    return;
                }
                this.$api.keyword.keywordUpdate(ary[0]).then(res => {

                    if (res.code === 200 && res.data) {
                        that.isActionSuccessed = true;
                        //Toast('操作成功！')
                        that.getList();
                    } else {
                        Toast('系统出错！')
                    }
                })
            }
        },
        delword(id) {
            var params = {
                id
            };
            var that = this;
            this.$api.keyword.keywordDelete(params).then(res => {
                if (res.code === 200 && res.data) {
                    that.isActionSuccessed = true;
                    that.getList();
                    //Toast('操作成功！')
                } else {
                    Toast('系统出错！')
                }
            })
        }
    },
    mounted() {
        //this.getList();
    }
}
</script>
